
<template>
    <div>
        <el-card class="login-form-layout">
            <el-form autoComplete="on" :model="registerForm" :rules="registerRules" ref="registerForm" label-position="left" style="align-content: center">
                <h2 class="login-title color-main" style="align-content: center"> HUST线上二手市场 </h2>

                <el-form-item prop="username">
                    <el-input name="username"
                              type="text"
                              v-model="registerForm.username"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请设置你的用户名">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input name="password"
                              type="text"
                              v-model="registerForm.password"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请设置你的密码">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item prop="passwordRepeat">
                    <el-input name="passwordRepeat"
                              type="text"
                              v-model="registerForm.passwordRepeat"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请再次确认你的密码">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item prop="name">
                    <el-input name="name"
                              type="text"
                              v-model="registerForm.name"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请输入你的姓名">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item prop="sex">
                    <el-radio-group v-model="registerForm.sex">
                        <el-radio :label="false">男</el-radio>
                        <el-radio :label="true">女</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item prop="address">
                    <el-input name="address"
                              type="text"
                              v-model="registerForm.address"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请输入你的地址">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item prop="qq">
                    <el-input name="qq"
                              type="text"
                              v-model="registerForm.qq"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请输入你的QQ号">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item prop="tel">
                    <el-input name="tel"
                              type="text"
                              v-model="registerForm.tel"
                              @keyup.enter.native="handleRegister"
                              autoComplete="on"
                              placeholder="请输入你的电话号码">
                      <span slot="prefix">
                        <svg-icon icon-class="user" class="color-main"></svg-icon>
                      </span>
                    </el-input>
                </el-form-item>

                <el-form-item style="text-align: center;">
                    <el-button style="width: 100%" type="primary"  :loading="loading" @click.native.prevent="handleRegister">
                        完成注册！返回登录页面
                    </el-button>

                </el-form-item>

            </el-form>

        </el-card>
        <img :src="bg" class="login-center-layout" alt="">
    </div>

</template>




<script>
import store from "../../store";
import router from "../../router";
import bg from "../../assets/bg.jpg";
import {isvalidUsername} from "../../utils/validate";
import UserType from "../../common/userType";

import {getUserInfo,signup} from "../../api/login";
import SexType from "../../common/SexType";

export default {
    name: "register",
    data(){
        const validateUsername = (rule, value, callback) => {
            if(value=='')
            {
                callback(new Error("请设置你的用户名!"))
            }
            else if(value.length>20){
                callback(new Error("用户名应在20字符以内!"))
            }
            //这里对比用户名是否重复
            else if(false)
            {
                callback(new Error(""));
            }
            else callback();
        };

        const validatePassword = (rule, value, callback) => {
            if(value=='') {
                callback(new Error("请设置你的密码!"));
            }
            else
            {
                callback();
            }
        }

        const validatePwdRepeat = (rule, value, callback) => {
            if(value=='') callback(new Error("请再次输入你的密码！"));
            else if (value!== this.registerForm.password) {
                callback(new Error("密码输入不一致!"))
            } else {
                callback();
            }
        }
        const validateSexType = (rule, value, callback) => {
            if([SexType.man,SexType.woman].indexOf(value) === -1)
            {
                callback(new Error("请选择你的性别"));
            }
            else callback();
        }
        return {
            bg: bg,
            registerForm:{
                username: '',
                password: '',
                userType:1,
                passwordRepeat: '',
                name:'',         //姓名
                sex:'',
                address:'',     //设置地址
                QQ: '',
                phoneNumber:'',
            },
            registerRules:{
                username: [{validator:validateUsername, required: true, trigger: "blur"}],
                password: [{validator:validatePassword ,required: true, trigger: "blur"}
                    ,{pattern: /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,required: true, message: "密码非法", trigger: "blur"}],
                passwordRepeat: [{ validator:validatePwdRepeat, trigger: "blur",required: true}
                ],
                name:[{min:3,max:20,required:true,message:"姓名应在3到20字符之间",trigger:"blur"}],
                sex: [{validator:validateSexType,required:true,trigger:"blur"}],
                address: [{min:1,required:true,message:"请输入地址",trigger:"blur"}],
                QQ:[{pattern: /^-?[1-9]\d*$/,required:true,message:"QQ号码非法",trigger:"blur"}],
                phoneNumber: [{pattern: /^-?[1-9]\d*$/ ,required:true,message:"电话号码非法",trigger:"blur"}]
            },
            loading : false,
        }




    },
    methods:{
        handleRegister()
        {

            this.$refs.registerForm.validate(
                valid => {
                    if (valid) {
                        this.loading = true;

                        //register行为

                        //register行为
                        signup( this.registerForm.username,
                            this.registerForm.password,
                            this.registerForm.userType,
                            this.registerForm.name,
                            this.registerForm.sex,
                            this.registerForm.address,
                            this.registerForm.qq,
                            this.registerForm.tel
                        ).then(res =>{
                            this.loading=false;

                            this.$alert("注册成功！返回登录页面");
                            this.$router.push({path: '/user/login'});
                        }).catch((error) =>{
                            // this.console("failed!")
                            console.log("failed!");
                        })
                        this.loading=false;
                    }
                    else {
                        console.log("登陆参数校验不合法！");
                        return false;
                    }
                })
        },
    },
}
</script>

<style scoped>
.login-form-layout {
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
    width: 400px;
    margin: 50px auto;
    border-top: 10px solid #409EFF;
}

.login-title {
    text-align: center;
}

.login-center-layout {
    background: #409EFF;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    /*margin-top: 200px;*/
}
</style>
